import { connect } from 'dva';
import { Card, Col, Icon, Row, Tabs,Input,Button } from 'antd';
import React, { PureComponent } from 'react';
import styles from './index.less';
import { iconData } from './IconData';

const { TabPane } = Tabs;
//注入模型类 dispatch
const mapStateToProps = (state) => {
  const menuData = state['AdminMenu'].menuData;
  //console.log('aa',state);
  return {
    menuData,
  };
};
@connect(mapStateToProps)
class IconPreview extends PureComponent {
  state = {
        selectedIcon: '',
        dataSource: iconData,
    };
  handelClick = type => {
    const { onCancel, dispatch } = this.props;
    dispatch({
      type: 'AdminMenu/setDataIcon',
      payload:{
        icon:type
      },
    });
    onCancel();
  };
  handleInputChange = (e) => {
        const {value} = e.target;
        const dataSource = iconData.map(item => {
            const icons = item.icons.filter(it => it.indexOf(value) !== -1);
            return {...item, icons};
        });

        this.setState({dataSource});
    };
  render() {
    const {dataSource, selectedIcon} = this.state;
    return (
            <>
                <div style={{marginBottom: 16}}>
                    <Input.Search placeholder="Search" onChange={this.handleInputChange}/>
                </div>
                <div style={{height: document.body.clientHeight - 390, overflow: 'auto'}}>
                    {dataSource.map(item => {
                        const {description,category, icons} = item;

                        if (icons.length==0) return null;

                        return (
                            <div key={category}>
                                <h3>{description}</h3>
                                <Row>
                                    {icons.map(type => {
                                        return (
                                            <Col style={{marginBottom: 16}} key={type} span={3}>

                                                <Button
                                                    style={{
                                                        display: 'flex',
                                                        flexDirection: 'column',
                                                        justifyContent: 'center',
                                                        alignItems: 'center',
                                                        width: 50,
                                                        height: 50,
                                                        cursor: 'pointer',
                                                    }}
                                                    type={selectedIcon === type ? 'primary' : 'default'}
                                                    onClick={() => this.handelClick(type)}
                                                >
                                                    <Icon style={{fontSize: 20}} type={type}/>
                                                </Button>
                                            </Col>
                                        );
                                    })}
                                </Row>
                            </div>
                        );
                    })}
                </div>
                </>
      // <Tabs defaultActiveKey="direction">
      //   {iconData.map(data => (
      //     <TabPane tab={data.description} key={data.category}>
      //       <Card className={styles.card} bordered={false}>
      //         <Row gutter={24} className={styles.iconPreview}>
      //           {data.icons.map(icon => (
      //             <Col span={4} key={icon}>
      //               <Icon
      //                 type={icon}
      //                 onClick={() => {
      //                   this.handelClick({ icon });
      //                 }}
      //               />
      //             </Col>
      //           ))}
      //         </Row>
      //       </Card>
      //     </TabPane>
      //   ))}
      // </Tabs>
    );
  }
}
export default IconPreview;